<template>
    <div>
        <h2>{{title}}</h2>
        <input type="text" placeholder="请输入内容" v-model="inputValue" >
        <button @click="bindConfirm">确定</button>
        <ul>
          <li v-for="item,index in list">
              {{item}}
              <button @click="bindDelete(index)">删除</button>
          </li>
        </ul>
    </div>
  </template>
  
  <!-- 
     1. 点击确定按钮，获取输入框内容，添加到列表
       
  
  -->
  <script>
    export default {
        data() {
            return {
                title:'TodoList',
                inputValue:'',
                list:['javascript']
            }
        },
        methods: {
          bindConfirm(){
             const inputValue = this.inputValue // 获取输入框内容
             this.list.push(inputValue) //添加内容到数组
             this.inputValue = '' //清除输入框内容
          },
          bindDelete(index){
             this.list.splice(index,1)
          }
        },
    }
  </script>
  
  <style lang="css" scoped>
  
  </style>